<template>
  <div class="love">
    <div class="red">
     <p><van-icon name="arrow-left" @click="kk"/></p>
     <p>创建直播</p>
     <p></p>
    </div>
    <div class="pp">
      <video class="iu" ref="video" autoplay></video>
    </div>

    <div class="pink">
      <button type="primary" @click="callCamera" style="margin-right: 10px;">
        开启直播
      </button>

      <button type="primary" @click="closeCamera">关闭直播</button>
    </div>
  </div>
</template>

<script>
import { defineComponent } from "vue";
export default defineComponent({
  setup(props, context) {
    return {};
  },
  methods: {
    callCamera() {
      navigator.mediaDevices
        .getUserMedia({
          video: true,
        })
        .then((success) => {
          this.$refs["video"].srcObject = success;
          this.$refs["video"].play();
        })
        .catch((error) => {
          console.error("摄像头开启失败，请检查摄像头是否可用！");
        });
    },
    closeCamera() {
      if (!this.$refs["video"].srcObject) return;
      let stream = this.$refs["video"].srcObject;
      let tracks = stream.getTracks();
      tracks.forEach((track) => {
        track.stop();
      });
      this.$refs["video"].srcObject = null;
    },
    kk(){
        this.$router.go(-1)
    }
  },
});
</script>

<style lang="less">
.love {
  display: flex;
  flex-direction: column;
  height: 100%;
  .red {
    height: 50px;
    background: blue;
    display: flex;
    align-items: center;
    justify-content: space-between;
    p{
        padding: 0 20px;
        color: white;
    }
  }
  .pp {
    flex: 1;
    overflow-y: scroll;
    .video{
      width: 330px;
      height: 450px;
    }
  }
  .pink {
    width: 100%;
    height: 100px;
    button {
      width: 100%;
      height: 40px;
      background: skyblue;
      color: white;
      border: 0;
      margin-top: 9px;
    }
  }
}
</style>
